上一篇介紹了變數的用法,接下來談談函式的用法,函式簡單來說可以想成功能的實現,讓原本不會動的頁面動起來,下面直接來說說函式的寫法,以及一些簡單的操作
Vue的函式跟變數一樣都是要寫在<Script>
裡面,打開專案裡的App.vue可以看到在<script>
裡面有一塊methods的區間,如下
methods: {
startHacking() {
this.$notify({
title: "It works!",
type: "success",
message:
"We've laid the ground work for you. It's time for you to build something epic!",
duration: 5000
});
}
}
這塊區間就是宣告函式的地方,其中 startHacking 這個是函式的名稱,( )
表示前面的startHacking
是一個函式,( )
內可以放一些宣告一些變數讓數值傳入,{ }
內為函式內要做的事情。這樣講可能很模糊,就讓我們實際操作一遍吧。
目標為:按一個按鈕讓上一篇的文字改變。
首先我們先將網頁上一些不要的東西去掉,然後新增一個按鈕
<template>
<div id="app">
<div>{{this.para}}</div>
<el-button>按鈕</el-button>
</div>
</template>
<script>
export default {
data() {
return {
para: "原本的文字" //字串格式記得要用“”括起來
};
},
methods: {}
};
</script>
<style>
#app {
font-family: Helvetica, sans-serif;
text-align: center;
}
</style>
接下來新增一個函式,就叫做clickEvent
吧
<script>
export default {
data() {
return {
para: "原本的文字" //字串格式記得要用“”括起來
};
},
methods: {
clickEvent(){
}
}
};
</script>
至於函式內容,這邊要將para
這個變數內的文字改變,在程式裡將變數給予值大部分是用 =
的符號,所以將para給予一個值的寫法為
this.para = "這是改變後的文字"; //在javascript裡面,一段程式碼(句子)結束的時候需要加一個分號表示結束
接著我們把這段語法寫進clickEvent
裡面
methods: {
clickEvent(){
this.para = "這是改變後的文字";
}
}
接下來我們需要一個開關去呼叫剛剛寫的函式起來動作,在Vue裡面監聽按下按鈕的動作寫法很簡單,只要在<el-button>
裡面加上一個@click=函式名稱
即可
<template>
<div id="app">
<div>{{this.para}}</div>
<el-button @click=clickEvent()>按鈕</el-button>
</div>
</template>
存擋後回到瀏覽器的 http://localhost:8010
可以看到畫面長這樣
按一下按鈕後,文字會改變
這樣就完成一個簡單的函式操作,接下來嘗試數字的操做。
目標:計算總共按了幾次按鈕。
稍微改一下顯示的畫面
<template>
<div id="app">
<div>總共按了{{this.para}}次</div>
<el-button @click="clickEvent()">按鈕</el-button>
</div>
</template>
修改一下變數的內容,改為數字0
data() {
return {
para: 0 //數字格式不用“”括起來
};
},
接下來再修改函式內容,讓變數經過一次函數動作就加1
methods: {
clickEvent() {
this.para = this.para + 1;
}
}
或者也可以寫成比較簡易的寫法,兩者結果是一樣的
methods: {
clickEvent() {
this.para += 1;
}
}
存擋後回到瀏覽器 http://localhost:8010 就可以操作剛剛寫的功能了
簡單的函式應用大概就講到這,下一篇預計會分享一些element-ui的簡單套件使用和一些比這篇複雜一點點的函式操作